<template>
    <div class="app-container">
        <!-- 顶部筛选区 -->
        <div class="filter-container" style="margin-bottom: 15px">
            <el-input
                v-model="queryParam.seatNumber"
                placeholder="座位编号"
                style="width: 200px"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />
            <el-select
                v-model="queryParam.location"
                placeholder="区域"
                clearable
                style="width: 120px; margin-left: 10px"
            >
                <el-option label="A区" value="A" />
                <el-option label="B区" value="B" />
                <el-option label="C区" value="C" />
            </el-select>
            <el-select
                v-model="queryParam.reserveStatus"
                placeholder="状态"
                clearable
                style="width: 120px; margin-left: 10px"
            >
                <el-option label="已预约" :value="1" />
                <el-option label="使用中" :value="2" />
                <el-option label="已完成" :value="3" />
            </el-select>

            <el-button
                class="filter-item"
                style="margin-left: 10px; font-size: 18px"
                type="primary"
                size="small"
                @click="handleFilter"
            >
                <i class="el-icon-search" style="font-size: 22px"></i>
                搜索
            </el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px; font-size: 18px"
                type="success"
                size="small"
                @click="handleCreate"
            >
                <i class="el-icon-plus" style="font-size: 22px"></i>
                新增预约
            </el-button>
        </div>

        <!-- 预约表单对话框 -->
        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="座位编号" prop="seatNumber">
                    <el-input v-model="form.seatNumber"></el-input>
                </el-form-item>
                <el-form-item label="区域位置" prop="location">
                    <el-select v-model="form.location" style="width: 100%">
                        <el-option label="A区" value="A" />
                        <el-option label="B区" value="B" />
                        <el-option label="C区" value="C" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                        v-model="form.startTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 100%"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker
                        v-model="form.endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 100%"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </el-dialog>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="seatNumber" label="座位号" width="120" />
            <el-table-column prop="location" label="区域" width="100" />
            <el-table-column prop="username" label="预约人" width="120" />
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="statusTagType(scope.row.reserveStatus)">
                        {{ statusText(scope.row.reserveStatus) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180" :formatter="formatTime" />
            <el-table-column prop="endTime" label="结束时间" width="180" :formatter="formatTime" />
            <el-table-column label="操作" width="220" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.reserveStatus === 1"
                        type="primary"
                        size="mini"
                        @click="handleCheckIn(scope.row)"
                    >签到</el-button>
                    <el-button
                        v-if="scope.row.reserveStatus === 2"
                        type="warning"
                        size="mini"
                        @click="handleCheckOut(scope.row)"
                    >签退</el-button>
                    <el-button
                        v-if="scope.row.reserveStatus === 1"
                        type="danger"
                        size="mini"
                        @click="handleCancel(scope.row)"
                    >取消</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryParam.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordTotal"
            style="margin-top: 15px"
        ></el-pagination>
    </div>
</template>

<script>
import {
    searchReservations,
    reserveSeat,
    cancelReservation,
    checkIn,
    checkOut,
    getReservationCount
} from '@/api/seat'

export default {
    name: 'SeatReservation',
    data() {
        return {
            tableData: [],
            recordTotal: 0,
            queryParam: {
                page: 1,
                limit: 10,
                seatNumber: '',
                location: '',
                reserveStatus: null
            },
            dialogFormVisible: false,
            formType: 0, // 0:新增 1:编辑
            form: {
                seatNumber: '',
                location: '',
                startTime: '',
                endTime: ''
            },
            rules: {
                seatNumber: [{ required: true, message: '请输入座位编号', trigger: 'blur' }],
                location: [{ required: true, message: '请选择区域', trigger: 'change' }],
                startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
                endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
            }
        }
    },
    computed: {
        formTitle() {
            return this.formType === 0 ? '新增预约' : '修改预约'
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            searchReservations(this.queryParam).then(res => {
                console.log("this.res= ",res);
                this.tableData = res.data
                this.recordTotal = res.count
            })
        },
        handleSizeChange(val) {
            this.queryParam.limit = val
            this.fetchData()
        },
        handleCurrentChange(val) {
            this.queryParam.page = val
            this.fetchData()
        },
        handleFilter() {
            this.queryParam.page = 1
            this.fetchData()
        },
        handleCreate() {
            this.formType = 0
            this.form = {
                seatNumber: '',
                location: '',
                startTime: '',
                endTime: ''
            }
            this.dialogFormVisible = true
        },
        submitForm() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (this.formType === 0) {
                        reserveSeat(this.form).then(res => {
                            this.$message.success('预约成功')
                            this.dialogFormVisible = false
                            this.fetchData()
                        })
                    }
                }
            })
        },
        handleCheckIn(row) {
            checkIn({ id: row.id }).then(res => {
                this.$message.success('签到成功')
                this.fetchData()
            })
        },
        handleCheckOut(row) {
            checkOut({ id: row.id }).then(res => {
                this.$message.success('签退成功')
                this.fetchData()
            })
        },
        handleCancel(row) {
            this.$confirm('确定要取消该预约吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                cancelReservation({ id: row.id }).then(res => {
                    this.$message.success('取消成功')
                    this.fetchData()
                })
            })
        },
        statusText(status) {
            const map = { 1: '已预约', 2: '使用中', 3: '已完成' }
            return map[status] || '未知'
        },
        statusTagType(status) {
            const map = { 1: 'primary', 2: 'success', 3: 'info' }
            return map[status] || 'danger'
        },
        formatTime(row, column, cellValue) {
            return cellValue ? this.$moment(cellValue).format('YYYY-MM-DD HH:mm') : '-'
        }
    }
}
</script>

<style scoped>
.filter-container {
    margin-bottom: 20px;
}
.el-table {
    margin-top: 20px;
}
</style>